import React, { Component } from "react";
import "./List.scss";
import axios from "axios";

export default class List extends Component {
  state = {
    showPage: false,
    value: " ",
    name: "",
    showTimeRange: "",
    cityName: "",
    shopName: "",
    priceRange: "",
    postUrlForShare: "",
    categoryItems: [],
    activeItem: false,
    caregories: [],
    index:0
  };
  componentDidMount() {
    axios
      .get(
        "https://show.maoyan.com/maoyansh/myshow/ajax/performance/navigation?&sellChannel=13&cityId=1&lng=0&lat=0"
      )
      .then((res) => {
        // console.log(res);
        this.setState({
          categoryItems: res.data.data,
        });
      }).catch(error=>{
        console.log(error);
      })
   let index = this.state.index
  //  console.log(index);
   this.getData(index)


  }


  handleSub = () => {
    // let val = this.state.value
    // axios.get(`https://show.maoyan.com/maoyansh/myshow/ajax/search/0;k=${val};st=0;p=1;s=20;tft=0?sellChannel=13&cityId=1&lng=0&lat=0`)
    //   .then(res => {

    //     let result = res.data.data.performanceVOList
    //     // console.log(result);
    //     if (result.length > 0) {
    //       this.setState({
    //         showPage: true,
    //         listItems: result,
    //         plug: false
    //       })
    //     } else {
    //       this.setState({
    //         showPage: false,
    //         plug: true
    //       })
    //     }
    //   }).catch(error => {
    //     console.log(error);
    //   })
    this.props.history.push('/serch')
  }

  handleChangInput = (e) => {
    let val = e.target.value;
    // console.log(val);
    this.setState({
      value: val,
    });
  };

  // 根据索引获取数据
  getData = (index) => {
    axios
      .get(
        `https://show.maoyan.com/maoyansh/myshow/ajax/performances/${index};st=0;p=1;s=20;tft=0;marketLevel=0?sellChannel=13&cityId=1&lng=0&lat=0`
      )
      .then((res) => {
        // console.log(res.data.data);
        this.setState({
          caregories: res.data.data,
        });
      })
      .catch((error) => {
        console.log(error);
      });
  };


  handleSubmit = (e) => {
    // console.log(e.target.getAttribute("data-index"));
    let index = e.target.getAttribute("data-index");
    this.getData(index);
    this.setState({
      index:index
    })
  };

  render() {
    return (
      <div className="list">
        {/* 搜索框开始 */}
        <div className="serch-input" onClick={this.handleSub}>
          <i></i>
          <input
            type="text"
            value={this.state.value}
            onChange={this.handleChangInput}
            placeholder="找明星·演出·场馆"
          />
          <span >确定</span>
        </div>
        {/* 搜索框结束 */}

        {/* 导航栏开始 */}
        <div className="listBody">
          <div className="listNav">
            {this.state.categoryItems.map((v) => {
              return (
                <div
                  className={
                    this.state.index == v.categoryId  ? "active" : "listItems"
                  }
                  key={v.categoryId}
                  data-index={v.categoryId}
                  onClick={this.handleSubmit}
                >
                  {v.categoryName}
                </div>
              );
            })}
          </div>
        </div>
        {/* 导航栏结束 */}

        {/* 内容开始 */}

        <div className="recommend">
          {this.state.caregories.map((v) => {
            return (
              <div className="recommend-show" key={v.performanceId}>
                <div className="item-img">
                  <img src={v.posterUrl} alt="" />
                </div>
                <div className="item-content">
                  <div className="title">{v.name}</div>
                  <div className="date">{v.showTimeRange}</div>
                  <div className="place">
                    <span>{v.cityName}</span>
                    <span>{v.shopName}</span>
                  </div>
                  <div className="price">
                    <div className="state">
                      <span className="state-left">售票中</span>
                      <span>{v.priceRange}元</span>
                    </div>
                    <div className="nature">自营</div>
                  </div>
                </div>
              </div>
            );
          })}
        </div>

        {/* 内容结束 */}
      </div>
    );
  }
}
